<template>
  <view class="top-problen-box">
    <!-- 客户服务中心 ----- -->
    <view class="public-content">
      <top-nav-bar />
      <view class="public-title">
        {{ $t('nav.title10') }}
      </view>
      <view class="public-desc">
        {{ $t('question.title3') }}
      </view>

      <!-- 修改开始 -->

      <view class="container">

        <view class="card">
          <view class="card-title">
            <uni-icons type="chat" size="24" color="#3498db"></uni-icons>
            <text class="card-title-text">{{ $t('protocol.name1') }}</text>
          </view>
          <text class="service-desc">{{ $t('protocol.name2') }}</text>
          <button class="btn" @click="onOpenChat">
            <uni-icons type="headphones" size="20" color="#fff"></uni-icons>
            <text>{{ $t('protocol.name3') }}</text>
          </button>
        </view>

        <view class="card">
          <view class="card-title">
            <uni-icons type="phone" size="24" color="#3498db"></uni-icons>
            <text class="card-title-text">{{ $t('protocol.name4') }}</text>
          </view>
          <text class="service-desc">{{ $t('protocol.name5') }}</text>
          <button class="btn btn-secondary" @click="showModal = true">
            <uni-icons type="phone-filled" size="20" color="#fff"></uni-icons>
            <text>{{ $t('protocol.name6') }}</text>
          </button>
        </view>

        <view class="card">
          <view class="card-title">
            <uni-icons type="home" size="24" color="#3498db"></uni-icons>
            <text class="card-title-text">{{ $t('protocol.name7') }}</text>
          </view>
          <view class="highlight">
            <text>{{ $t('protocol.name8') }}</text>
          </view>
          <text class="service-desc">{{ $t('protocol.name9') }}</text>
          <text class="service-desc">{{ $t('protocol.name10') }}</text>

          <view class="highlight">
            <text class="highlight-title">{{ $t('protocol.name11') }}</text>
            <view class="service-list">
              <text class="list-item">• {{ $t('protocol.name12') }}</text>
              <text class="list-item">• {{ $t('protocol.name13') }}</text>
              <text class="list-item">• {{ $t('protocol.name14') }}</text>
            </view>
          </view>

          <text class="service-desc">{{ $t('protocol.name15') }}</text>
          <button class="btn" @click="onOpenChat">
            <uni-icons type="chatboxes" size="20" color="#fff"></uni-icons>
            <text>{{ $t('protocol.name16') }}</text>
          </button>
        </view>

        <!-- 电话咨询模态框 -->
        <view v-if="showModal" class="modal" @tap="closeModal">
          <view class="modal-content" @tap.stop>
            <view class="modal-body">
              <uni-icons type="close" size="28" color="#7f8c8d" class="close" @click="closeModal"></uni-icons>
              <view class="card-title">
                <uni-icons type="phone" size="24" color="#3498db"></uni-icons>
                <text class="card-title-text">{{ $t('protocol.name17') }}</text>
              </view>
              <text class="service-desc">{{ $t('protocol.name18') }}</text>

              <form @submit="submitForm">
                <view class="form-group">
                  <cb-input v-model="formData.fullName" :title="$t('loan.product.name4')" type="loanProduct"
                            :placeholder="$t('loan.product.name5')" @change="(e) => (formData.fullName = e)" />
                </view>
                <view class="form-group">
                  <cb-input v-model="formData.phoneNumber" :title="$t('apply.phone')" type="number"
                            :placeholder="$t('apply.phone.placeholder')" />
                </view>

                <view class="checkbox-group">
                  <checkbox-group @change="onAgreeChange">
                    <label>
                      <checkbox value="agree" :checked="agreed" />
                      <text>{{ $t('protocol.name19') }}</text>
                    </label>
                  </checkbox-group>
                </view>

                <button form-type="submit" class="btn btn-secondary">{{ $t('protocol.name20') }}</button>
              </form>
            </view>

          </view>
        </view>
      </view>

      <!-- 修改结束 -->

    </view>
    <foot-page />
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useValidations } from '@/hooks/useValidations'
import { useChat } from '@/hooks/useChat'
import { useI18n } from 'vue-i18n'
import http from '@/utils/request.js'

const { onOpenChat } = useChat()

const { t } = useI18n()
const { validatePhone } = useValidations()

const formData = reactive({
  fullName: '',
  phoneNumber: ''
})

// 响应式数据
const showModal = ref(false)
const agreed = ref(false)
const productIndex = ref(0)

// 关闭模态框
const closeModal = () => {
  showModal.value = false
}



// 同意条款变化
const onAgreeChange = (e) => {
  agreed.value = e.detail.value.includes('agree')
}

// 提交表单
const submitForm = async () => {
  if (formData.fullName === '') {
    uni.showToast({
      title: t('loan.product.name5'),
      icon: 'none'
    })
    return
  }


  if (validatePhone(formData.phoneNumber)) {
    return
  }


  if (!agreed.value) {
    uni.showToast({
      title: t('user.guide.name10'),
      icon: 'none'
    })
    return
  }

  await http.post('/api/free/loanConsultations/loanConsultations', {
    fullName: formData.fullName,
    phoneNumber: formData.phoneNumber
  })


  uni.showToast({
    title: t('loan.product.name6'),
    icon: 'success',
    mask: true,
    success: () => {
      setTimeout(() => {
        closeModal()
        formData.fullName = ''
        formData.phoneNumber = ''
        agreed.value = false
        productIndex.value = 0
      }, 1500)
    }
  })
}

onLoad(() => {
})
</script>

<style lang="scss" scoped>
.top-problen-box {
  background: url('/static/bg/bg-top.png') no-repeat top center #e2ecf8;
  background-size: 100%;
}

.container {
  color: #333;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  padding: 40rpx 0;
  border-bottom: 2rpx solid #e0e0e0;
}

.header-title {
  color: #2c3e50;
  font-size: 56rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.header-desc {
  color: #7f8c8d;
  font-size: 32rpx;
  display: block;
}

.card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
  padding: 34rpx;
  margin-bottom: 40rpx;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:active {
  transform: translateY(-10rpx);
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
}

.card-title {
  font-size: 40rpx;
  color: #2c3e50;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
}

.card-title-text {
  margin-left: 24rpx;
}

.service-desc {
  color: #555;
  margin-bottom: 40rpx;
  line-height: 1.8;
  font-size: 32rpx;
  display: block;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3498db;
  color: white;
  padding: 28rpx 50rpx;
  border-radius: 90rpx;
  font-weight: 600;
  font-size: 32rpx;
  border: none;
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
}

.btn:active {
  background: #2980b9;
}

.btn-secondary {
  background: #2ecc71;
}

.btn-secondary:active {
  background: #27ae60;
}

.highlight {
  background-color: #f8f9fa;
  border-left: 8rpx solid #3498db;
  padding: 30rpx;
  margin: 30rpx 0;
  border-radius: 0 16rpx 16rpx 0;
}

.highlight-title {
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.service-list {
  padding-left: 40rpx;
}

.list-item {
  display: block;
  margin: 20rpx 0;
  font-size: 32rpx;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  border-radius: 24rpx;
  width: 90%;
  // padding: 34rpx;
  box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.2);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;

  .modal-body {
    padding: 34rpx;
  }
}

.close {
  position: absolute;
  top: 30rpx;
  right: 40rpx;
  cursor: pointer;
}

.form-group {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  margin-bottom: 16rpx;
  font-weight: 600;
  color: #2c3e50;
  font-size: 32rpx;
}

// picker,
// .input {
//   width: 100%;
//   padding: 28rpx;
//   border: 2rpx solid #ddd;
//   border-radius: 16rpx;
//   font-size: 32rpx;
// }

.picker {
  padding: 28rpx;
  border: 2rpx solid #ddd;
  border-radius: 16rpx;
  font-size: 32rpx;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  margin: 40rpx 0;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  font-weight: normal;
}

.text-center {
  text-align: center;
}
</style>
